<template>
  <div>
    <div class="a1"></div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {};
  },

  beforeCreate() {
    console.log("子组件beforeCreate");
  },
  created() {
    console.log("子组件的created");
  },
  beforeMount() {
    console.log("子组件beforeMount");
  },
  mounted() {
    console.log("子组件mounted");
  },
  beforeUpdate() {
    console.log("子组件beforeUpdate");
  },
  updated() {
    console.log("子组件Updated");
  },
  beforeDestroy() {
    console.log("子组件beforedestroy");
  },
  destroyed() {
    console.log("子组件destroyed");
  },
};
</script>
<style scoped>
/* scoped作用：让在该组件中写的css只针对当前组件有效   */
.a1 {
  width: 100px;
  height: 100px;
  background-color: purple;
}
</style>